<template>
    <div class="home-page">
        <section class="py5 text-center container">
            <div class="row py-lg-5">
                <div class="col-lg-6 col-md-8 mx-auto">
                    <img src="../assets/column.png" alt="callout" class="w-50">
                    <h2 class="font-weight-light">随心写作，自由表达</h2>
                    <p>
                        <!-- 开始写文章跳转路由 -->
                        <router-link to="/createPost" class="btn btn-primary my-2" >开始写文章</router-link>
                    </p>
                </div>
            </div>
    
        </section>
        <h4 class="font-weight-hold text-center">发现精彩</h4>
        <column-list :list="list"></column-list>
    
    </div>
    </template>
    <script lang="ts">
    import { computed, defineComponent, onMounted } from 'vue';
    import ColumnList  from '@/components/ColumnList.vue';
    // import {testData} from '../testData'
    import { useStore } from 'vuex';
    import {GlooalDataProps} from '../store'
    export default defineComponent({
        name:'Home',
        components:{
            ColumnList,
        },
        setup(){
            onMounted(()=>{
                store.dispatch('fetchColumns')
            })
            const store = useStore<GlooalDataProps>()
            const list = computed(()=>store.state.columns)
        
            return {
                list
            }
        }
    })
    </script>